<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="./css/food.css">
    <link rel="shortcut icon" href="./images/肌肉.png">
    <script src="./js/flexible.js"></script>

    <title>健身小助手</title>
</head>
<body>
    <header>
        <div>
            <span>首页</span>
        </div>
        <div>
            <img src="./images/更多.png" alt="">
        </div>
    </header>

    <div class="banner">
        <div>
            <ul>
                <li><a href="index.html">精选</a></li>
                <li><a href="friend.html">好友</a></li>
                <li><a href="food.html" style="color: #30dceb;">饮食</a></li>
                <li><a href="shopping.html">商场</a></li>
                <li><a href="practice.html">训练</a></li>
            </ul>
        </div>
    </div>
    <main>
        <!-- 第一个框 -->
        <div>
            <div class="top">
                <div class="left">今日还可以吃<p>11562</p>kcal</div>
                <div class="right">
                    <div><a href="#">拍照记录</a></div>
                    <div><a href="#">手动记录</a></div>
                </div>
            </div>
            <div class="bottom">
                <img src="./images/健身曲线.jpg" alt="">
            </div>
        </div>

        <!-- 第二个框 -->
        <div>
            <!-- 标题 -->
            <div class="title">
                <img id="carteen-logo" src="./images/images/食堂logo_03.jpg" alt="">
                <div>饮食学堂</div>
            </div>
            <!-- 内容 -->
            <div class="content">
                <img src="./images/images/早餐_03.jpg" alt="">
                <div class="right">
                    <p>体型决定了你吃什么，辣椒身材早餐多吃鸡蛋。</p>
                    <div class="bottom">
                        <a href="#">
                            <img src="./images/images/评论.jpg" alt="">
                            <p>153</p>
                        </a>
                        <a href="#">
                            <img src="./images/images/点赞.jpg" alt="">
                            <p>153</p>
                        </a> 
                    </div>
                </div>
            </div>

            <div class="content">
                <img src="./images/images/早餐_03.jpg" alt="">
                <div class="right">
                    <p>体型决定了你吃什么，辣椒身材早餐多吃鸡蛋。</p>
                    <div class="bottom">
                        <a href="#">
                            <img src="./images/images/评论.jpg" alt="">
                            <p>153</p>
                        </a>
                        <a href="#">
                            <img src="./images/images/点赞.jpg" alt="">
                            <p>153</p>
                        </a> 
                    </div>
                </div>
            </div>

            <div class="content">
                <img src="./images/images/早餐_03.jpg" alt="">
                <div class="right">
                    <p>体型决定了你吃什么，辣椒身材早餐多吃鸡蛋。</p>
                    <div class="bottom">
                        <a href="#">
                            <img src="./images/images/评论.jpg" alt="">
                            <p>153</p>
                        </a>
                        <a href="#">
                            <img src="./images/images/点赞.jpg" alt="">
                            <p>153</p>
                        </a> 
                    </div>
                </div>
            </div>
        </div>
    </main>   
    
    <!-- 底部 -->
    <footer>
        <div><ul>
            <li>
                <img id="footer1" src="./images/首页-首页.png" alt="">
                首页</li>
            <li>
                <img id="footer2" src="./images/跑步.png" alt="">
                跑步</li>
            <li>
                <img id="footer3" src="./images/计划.png" alt="">
                计划</li>
            <li>
                <img id="footer4" src="./images/我的.png" alt="">
                我的</li>
        </ul></div>
    </footer>
</body>

<script src="./js/common.js"></script>

</html>